<%@page import="java.text.SimpleDateFormat"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!doctype html>
<html>
	<head>
		<title>在线玩家 -- </title>
		<base href="<%=basePath%>" />
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<link rel="apple-touch-icon-precomposed" href="i/app-icon72x72@2x.png">
		<meta name="apple-mobile-web-app-title" content="Amaze UI" />
		<link rel="stylesheet" href="layui/css/layui.css">
		<style type="text/css">
		</style>

	</head>

	<body>
	    <br/>
		<form class="layui-form" action="" onsubmit='return false;'>
			<div class="layui-form-item">
				<div class="layui-inline">
					<div class="layui-input-inline">
						<select name="State" id="State">
							<option value="-1">全部状态</option>
							<option value="0">未使用</option>
							<option value="1">已使用</option>
							<option value="2">已废用</option>
						</select>
					</div>
				</div>

			<div class="layui-inline">
				<div class="layui-input-inline">
					<input type="text" name="Code" id="Code" placeholder="兑换码"
						autocomplete="off" class="layui-input">
				</div>
			</div>

			<div class="layui-inline">
				<div class="layui-input-inline">
					<input type="text" name="UserId" id="UserId" placeholder="用户ID"
						autocomplete="off" class="layui-input">
				</div>
			</div>

			<div class="layui-inline">
				<div class="layui-input-inline">
					<input type="text" class="layui-input" name="start" id="start"
						placeholder="开始" autocomplete="off">
				</div>
			</div>

			<div class="layui-inline">
				<div class="layui-input-inline">
					<input type="text" class="layui-input" name="end" id="end"
						placeholder="结束" autocomplete="off">
				</div>
			</div>

			<div class="layui-inline">
					<div class="layui-input-inline">
						<button class="layui-btn layui-btn-normal" data-type="reload" lay-filter="findID" id="findID">立即提交</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</div>
		</form>
		<div class="layui-form" id="table-list">
			<table class="layui-table" lay-skin="nob" id="record" lay-filter="record"></table>
		</div>
		<input type="hidden" id="GroupId"/>

        <script type="text/html" id="Status">
            {{#  if(d.Status == 0){ }}
              <a class="layui-btn layui-btn-xs">未使用</a>
            {{#  } else if(d.Status == 1){ }}
              <a class="layui-btn layui-btn-danger layui-btn-xs">已使用</a>
            {{#  } else if(d.Status == 2){ }}
              <a class="layui-btn layui-btn-danger layui-btn-xs">已废弃</a>
            {{#  } }}
        </script>
        
        <script type="text/html" id="UserId">
            {{#  if(d.UserId == 0){ }}
              <a class="layui-btn layui-btn-xs">未领取</a>
            {{#  } }}
        </script>
        
		<script src="js/jquery.min.js"></script>
		<script src="layui/layui.js"></script>
		<script src="js/frame/form_upload.js"></script>
		<script src="js/frame/datagrid.js"></script>
		<script>
			layui.use(['layer', 'form', 'table', 'laytpl','laydate'], function() {
				var layer = layui.layer,
					form = layui.form,
					table = layui.table,
					laytpl = layui.laytpl
					laydate = layui.laydate;

				layer.config({
					extend: 'MySkin/style.css'
				});

				//加个table表
				table.render({
					elem: '#record',
					url: 'activationCode/record',
					method: 'post',
					title: '玩家资源变化',
					totalRow: true,
					even:true,
					autoSort: false,
					cellMinWidth: 50, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
					id: 'AllTable',
					request: {
						pageName: 'PageIndex',
						limitName: 'PageCount'
					},
					where: {
						FilterStatus: $('#State').val(),
						FilterCode : $('#Code').val(),
						FilterUserId:$('#UserId').val(),
						start:$('#start').val(),
						end:$('#end').val(),
						GroupId:$('#GroupId').val()
					},
					cols: [[
						{field: 'Id',title: '唯一标识 '}, 
						{field: 'Key',title: '激活码'}, 
						{field: 'Status',title: '状态',templet:'#Status'}, 
						{field: 'UserId',title: '玩家Id',templet:'#UserId'},
						{field: 'Nickname',title: '昵称'},
						{field: 'FetchedTime',title: '领取时间'}
						]],
					page: true, //分页
					response: {
						statusCode: 200
						//重新规定成功的状态码为 200，table 组件默认为 0
					},
					parseData: function(res) { //将原始数据解析成 table 组件所规定的数据
						for (var i = 0; i < res.data.length; i++) {
							for (var key in res.data[i]) {
								if (res.data[i][key] == null) {
									res.data[i][key] == '无';
								}
							}
						}
						return {
							"code": res.status, //解析接口状态
							"msg": res.message, //解析提示文本
							"count": res.count, //解析数据长度
							"data": res.data //解析数据列表
							//解析数据列表
						};
					}
				});

				//根据条件查询表格数据重新加载
				var active = {
					reload: function() {
						//获取用户名
						//执行重载
						table.reload('AllTable', {
							page: {
								curr: 1 //重新从第 1 页开始
							}
							//根据条件查询
							,
							where: {
								FilterStatus: $('#State').val(),
								FilterCode : $('#Code').val(),
								FilterUserId:$('#UserId').val(),
								start:$('#start').val(),
								end:$('#end').val(),
								GroupId:$('#GroupId').val()
							}
						});
						return false;
					}
				};
				//点击搜索按钮根据用户名称查询
				$('#findID').on('click',
					function() {
						var type = $(this).data('type');
						active[type] ? active[type].call(this) : '';
					});

                setInterval(function(){
                	table.reload('AllTable', {});
                },60000);
                
                
                laydate.render({
	    		    elem: '#start',
	    		    type: 'datetime',
	    		    trigger: 'click'
	    		  });
	    	 
	    	 laydate.render({
	    		    elem: '#end',
	    		    type: 'datetime',
	    		    trigger: 'click'
	    		  });
			});
		</script>
	</body>
</html>
